<template>
  <div>
    <div class="list"></div>
    <!-- 面包屑 -->
    <div class="s1">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">全部商品</a></el-breadcrumb-item>
        <el-breadcrumb-item>分类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- tap栏 -->
    <div class="s2">
      <h2>分类</h2>
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane
          :label="item.category_name"
          :name="item.category_id + ''"
          v-for="item in taps"
          :key="item.category_id"
        >
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 内容 -->
    <div class="mobile-warper">
      <div class="mobile-item">
        <div
          class="mobile-item-list"
          v-for="item in activeName == '0' ? Getallshop : getappdate"
          :key="item.product_id"
        >
          <div class="mobile-item-list-app">
            <img
            @click="tiao(item.product_id)"
              :src="'http://101.132.181.9:3000/' + item.product_picture"
              alt=""
            />
          </div>
          <p>{{ item.product_name }}</p>
          <p style="color: #b0b0b0; font-size: 12px">
            {{ item.product_title }}
          </p>
          <p style="color: red">
            {{ item.product_selling_price }}&ensp;<s
              v-if="item.product_selling_price != item.product_price"
              style="color: gray; font-size: 20px"
              >{{ item.product_price }}</s
            >
          </p>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryModel.currentPage"
      :page-size="queryModel.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getTaps, allshopList, getappList } from "@/api/user";
export default {
  name: "goods",
  data() {
    return {
      //tap栏
      taps: [],
      activeName: 0, //默认
      Getallshop: [], //全部数据
      getappdate: [],
      total: 0, //总条数
      queryModel: {
        currentPage: 1,
        pageSize: 15,
      },
    };
  },
  created() {
    this.tapsList();
    this.allshop();
  },
  methods: {
       //跳转
    tiao(type){
      this.$router.push({
        path:"/details", //跳转的路径
        query:{  //query传参
          type:type
        }
      })
    },
    //点击分类数据
    async handleClick() {
      console.log(this.activeName);
      try {
        if (this.activeName == "0") {
          this.allshop();
        }
        const obj = {
          ...this.queryModel,
          categoryID: [Number(this.activeName)],
        };
        console.log(obj, "obj");

        const {
           total, Product 
        } = await getappList(obj);
        this.getappdate = Product;
        this.total = total;
        console.log(Product, "getapp");
      } catch (error) {}
    },
    //全部商品
    async allshop() {
      let res = await allshopList(this.queryModel);
      console.log(res, "2");
      if (res.code == "001") {
        this.Getallshop = res.Product;
        this.total = res.total;
      }
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryModel.pageSize = val;
      this.allshop();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryModel.currentPage = val;
      this.allshop();
    },
    //头部
    async tapsList() {
      let res = await getTaps();
      console.log(res.category, "1");
      this.taps = res.category;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-pagination{
  margin-top: 20px;
  text-align: center;
}
.mobile-warper {
  margin-top: 20px;
  width: 100%;
  background-color: #f5f5f5;
  .mobile-item {
    width: 90%;
    background-color: #f5f5f5;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-around;
    flex-wrap: wrap;
    .mobile-item-list {
      text-align: center;
      width: 18%;
      background-color: #f5f5f5;

      .mobile-item-list-app {
        width: 100%;
        height: 70%;
        background-color: #f5f5f5;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.s2 {
  width: 85%;
  height: 41.8px;
  margin: auto;
  display: flex;

  h2 {
    line-height: 41.8px;
  }
  .el-tabs {
    margin-left: 20px;
  }
}
.list {
  width: 100%;
  height: 30px;
  background-color: white;
}
.s1 {
  width: 80%;
  height: 30px;
  background-color: white;

  margin: auto;
}
.el-breadcrumb {
  font-size: 15px;
  font-weight: 700;
  color: #303133;
}
</style>